<!DOCTYPE HTML>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251">
  <title>canvas</title>
  </head>
  <body style="background:#888;">
		<canvas id="canvas" width="550" height="440">Your browser suks! Download new one it's free!</canvas>
  </body>
  <script>
    var ctx = document.getElementById('canvas').getContext('2d');
  	ctx.fillStyle="#369";
    ctx.fillRect(30,30,550,440);
    ctx.fillStyle="#f00";
    ctx.fillRect(10,10,50,50);
    
    ctx.save;
		ctx.lineCap='round';
		ctx.lineJoin='round';
		ctx.strokeStyle = '#bbbbbb';
		ctx.lineWidth = 20;

    ctx.globalCompositeOperation="xor";
		ctx.beginPath();
		ctx.moveTo(0, 0);
		ctx.quadraticCurveTo(50, 15, 100,100);
		ctx.stroke();
    ctx.restore;
    
    ctx.globalCompositeOperation="source-atop";
    ctx.fillStyle="#00FFFF";
    ctx.fillRect(70,70,90,10);
  </script>
</html>
